<template>
  <view class="uni-padding-wrap uni-common-mt">
    <wd-grid :column="2" :gutter="5" clickable>
      <wd-grid-item use-text-slot use-icon-slot link-type="switchTab" url="/pages/hotel/index">
        <template #icon>
          <wd-icon class-prefix="fa" name="hotel" size="16px" color="darkblue" />
        </template>
        <template #text>
          <wd-text text="酒店预定" type="primary" size="16px"></wd-text>
        </template>
      </wd-grid-item>
      <wd-grid-item use-text-slot use-icon-slot link-type="navigateTo" url="/pages/hotel/HotelOrders" >
        <template #icon>
          <wd-icon class-prefix="fa" name="hotel" size="16px" color="darkred" />
        </template>
        <template #text>
          <wd-text text="酒店订单" type="primary" size="16px"></wd-text>
        </template>
      </wd-grid-item>
      <wd-grid-item use-text-slot use-icon-slot link-type="navigateTo" url="/pages/flight/index" >
        <template #icon>
          <wd-icon class-prefix="fa" name="plane-departure" size="16px" color="darkblue" />
        </template>
        <template #text>
          <wd-text text="机票预定" type="primary" size="16px"></wd-text>
        </template>
      </wd-grid-item>
      <wd-grid-item use-text-slot use-icon-slot link-type="navigateTo" url="/pages/flight/FlightOrders">
        <template #icon>
          <wd-icon class-prefix="fa" name="plane-departure" size="16px" color="darkred" />
        </template>
        <template #text>
          <wd-text text="机票订单" type="primary" size="16px"></wd-text>
        </template>
      </wd-grid-item>
    </wd-grid>
    
  </view>
</template>

<script setup>
  import {
    onMounted,
    ref
  } from 'vue'

  import {
    useUserStore
  } from '@/store/index'
  import {
    onShow,
    onLoad,
    onNavigationBarButtonTap
  } from '@dcloudio/uni-app'
  // import WdGrid from "../../uni_modules/wot-design-uni/components/wd-grid/wd-grid.vue";
  const columns = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'])
  const avalue = ref('选项1')

  function handleConfirm({ value }) {
    avalue.value = value
    console.log(avalue.value)
  }
  const rate = ref(0)
  
  function handleRateChange({ value }) {
    console.log(value)
  }

  const userStore = useUserStore()

  let coverImg = ref("/static/images/scene-1.jpg")

  onLoad(() => {
    console.log('on...load...')
  })

  onShow(() => {
    // console.log("onpageshow", userStore.isLogined, userStore.fullname);

    if (!userStore.isLogined) {
      //jump to login page
      // console.log('jump to login page')
      // uni.navigateTo({
      // 	url: '/pages/login/login'
      // })
    }

  })

  // 监听按钮点击
  onNavigationBarButtonTap((e) => {
    console.log(e)
  });
</script>

<style lang="scss">
  .is-hover {
    color: rgba(255, 255, 255, 0.6);
    background-color: #179b16;
    border-color: #179b16;
  }

  .container-grid-col-2 {
    display: grid;
    // height: 150rpx;
    grid-template-columns: 1fr 1fr;
  }

  .gradient-box {
    background-color: darkslateblue;
    background-image: linear-gradient(to right bottom,
        rgba(0, 0, 0, 0) 0%,
        /* 初始完全透明 */
        rgba(0, 0, 0, 0.2) 30%,
        /* 30% 位置透明度 0.2 */
        rgba(0, 0, 0, 0.2) 100%
        /* 30% 后保持不透明度 0.2 */
      );
  }

  .transparent-grid {
    background-color: transparent !important;
    /* 完全透明 */
    /* 或者自定义颜色 */
    /* background-color: rgba(255, 0, 0, 0.3) !important; */
  }

  .child {
    background-color: white;
    /* 子元素背景不透明 */
    color: black;
    /* 文字颜色不受影响 */
  }



  .gradient-card {
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    color: white;
    padding: 30rpx;
    border-radius: 16rpx;
  }

  .title {
    font-size: 18px;
    font-weight: bold;
    display: block;
    margin-bottom: 10rpx;
  }

  .desc {
    font-size: 14px;
    opacity: 0.9;
  }


  .u-card {
    border-radius: 16rpx !important;
    overflow: hidden !important;
    /* 防止图片溢出圆角 */
  }

  /* 封面图样式 */
  .u-card__cover {
    height: 300rpx !important;
    /* 固定高度 */
  }

  .card-content {
    padding: 10rpx;
    color: #666;
  }

  .img {
    width: 100%;
    height: 90px;
  }
</style>